<?php get_instance()->view('common/header');?>
<div class="page-container home">
  <?php get_instance()->view('common/sidebar');?>
  <style>
  	#upl-img{
  		border: 1px solid #D7D7D7;
  		width: 100%;
  		height: 500px;
  		text-align: center;
  		position: relative;
  	}
  	
  	#upl-img img{
  		height:100%;
  	}
/*  	#upl-img i{
  		color: #D7D7D7;
  		font-size: 55px;
  		height:500px;
  		line-height:500px;
  	}*/
  	#footer{
  		width: 100%;
  		text-align: center;
  		margin-top:20px;
  	}

	#upl-img i{
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 100%;
		right: 0;
		bottom: 0;
		margin: auto;
		/*opacity: 0;*/
	}
	
	.webuploader-pick {
	    background: #00b7ee none repeat scroll 0 0;
	    border-radius: 3px;
	    color: #fff;
	    cursor: pointer;
	    display: inline-block;
	    overflow: hidden;
	    padding: 10px 15px;
	    position: relative;
	    text-align: center;
	    width: 100%;
	}
  </style>
  <div class="page-content-wrapper">
	  <div class="page-content">
	    <div class="row">
	      <div class="col-md-12">
	        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
	        <h3 class="page-title"> 广告配置 </h3>
	        <ul class="page-breadcrumb breadcrumb">
	          <li><i class="fa fa-home"></i><a href="javascript:void(0);">广告配置  </a></li>
	        </ul>
	        <!-- END PAGE TITLE & BREADCRUMB-->
	      </div>
	    </div>
	    <div class="row">
	    	  <div class="col-md-12">
	    	  		<div style="width:800px;margin:0 auto;">
		    	  		<div class="note note-success">
							<p>
								 广告配置用于启动APP展示的广告图，仅可配置一张，更换后用户下次启动将可查看到最新广告页面.
							</p>
						</div>
	    	  			<div class="row">
	    	  				 <div class="col-md-6" >
						      	<p>广告图</p>
 						      	<div id="upl-img">
 						      		<img alt="" src="<?php echo getImage($info['app_advert'], 'og');?>" id="upload-img" <?php if( ! $info['app_advert']):?>class="hide"<?php endif;?> style="width:100%;">
						      	</div>
						      	<div style="font-size:14px;margin-top:10px;">
						      		<div id="uploader-demo">  
						      			<!--用来存放item-->  
						      			<div id="thelist" class="uploader-list"></div>  
						      			<div>  
						      				<div id="filePicker"><?php echo ! $info['app_advert'] ? '选择图片' : '更换图片';?></div>  
						      			</div>  
						      		</div>  
						      	</div>  
						      	<p>建议上传 1242X2208 像素广告图已达最佳浏览效果</p>
						      </div>
						       <div class="col-md-6" style="padding-top:20px;">
						       <form class="form-horizontal" method="post">
								  <div class="form-body">
						       		<div class="form-group">
										<label class="col-md-3 control-label">类型</label>
										<div class="col-md-9">
											<select class="form-control" name="type">
												<option <?php if($info['app_advert_type'] == 1 || ! $info['app_advert_type']):?>selected="selected"<?php endif;?> value="1">纯展示</option>
												<option <?php if($info['app_advert_type'] == 2):?>selected="selected"<?php endif;?> value="2">外链跳转</option>
											</select>
										</div>
									</div>
						       		<div class="form-group out" style="display: none;">
										<label class="col-md-3 control-label">外链url <span class="required">*</span></label>
										<div class="col-md-9">
											<input class="form-control required" type="text" id="out_url" name="url" value="<?php echo $info['app_advert_url'] ? $info['app_advert_url'] : ''; ?>">
										</div>
									</div>
									<input name="pic" type="hidden">
								   </div>
								</form>
						      </div>
	    	  			</div>
	    	  		</div>
	    	  </div>
	    </div>
	    <div id="footer">
	    	<button type="button" class="btn green submit-btn"><i class="fa fa-save"></i> 保存配置</button>
	    </div>
	  </div>
  </div>
</div>
<script>
	$('select').on('change', function(e){
	    var optionSelected = $("option:selected",this);
	    this.value == 1 ? $('.out').hide() : $('.out').show();
	}).change();

  $(function(){  
  
	   var uploader = WebUploader.create({  
					       auto: true,  
					       server: "<?php echo base_url('portAdmin/trmlPc/setting/Advert/uploadImge'); ?>",
					       pick: '#filePicker',  
					       accept: {  
					           title: 'Images',  
					           extensions: 'gif,jpg,jpeg,bmp,png',  
					           mimeTypes: 'image/*'  
					       },  
					       method:'POST',
					       fileVal:'Filedata',  
	   });  
   
	   uploader.on( 'uploadProgress', function( file, percentage ) {  
		   App.blockUI({message:'图片上传中...'});
	   });  
	  
	   uploader.on( 'uploadSuccess', function( file, response) {
			$('[name="pic"]').val(response._raw);
			$('#upload-img').attr('src', response._raw).removeClass('hide');
			$('.webuploader-pick').html('更换图片');
		}); 
  
	   uploader.on( 'uploadError', function( file ) {  
		   show_message({status:0,message:'上传失败'});
	   });  
  
	   uploader.on( 'uploadComplete', function( file ) {  
		   App.unblockUI();
	   }); 

	   $.e_validate.init('.form-horizontal',{successCallback:function(data){
			$('[name="pic"]').val('');
		}}); 
	   $('.submit-btn').click(function(){$('form').submit();});
	});
</script>
</body>
</html>